HOME → 3 WordPress → 03 カスタマイズ → 

標準 SNSボタン カスタマイズ -2- ボタンの追加と削除

WordPress Twenty Seventeen
【 標準のソーシャルリンクメニュー 】のカスタマイズ
その-2 ボタンの追加と削除
 
フッターに表示される【 標準のソーシャルリンクメニュー 】のボタンの追加前とボタンの追加後。(Lineはてな が表示されていない。) 
SNSボタンの追加
 
【 twenty seventeen 】には、「ソーシャルリンクメニュー」が標準で用意されているが、利用するには幾つかのカスタマイズが必要である。この中で、当記事は次の位置づけとなっている。
ソーシャルメニュー ~カスタマイズ~ 一覧
 
 
②.ボタンの追加と削除( Webフォントも追加 )
 
 
 
 
 

 

スポンサー リンク

 

 
 
 

  

1. ボタンの追加と削除要領
 
『外観』の中から『メニュー』を開き、『ソーシャルリンクメニュー』を選択し、『カスタムリンク』を開く。A:にSNSボタンがクリックされた時のリンク先【 URL 】を入力し、B:にメニュー構造に表示される【 ナビゲーションラベル 】を入力し、『メニューに追加』ボタンを押すことで、SNSボタンを追加することが出来る。 
SNSボタンの追加
 
SNSボタンを追加してみた例。 
SNSボタンの追加
 
SNSボタン追加結果。 
①.Google + ・・・アイコン有・フォント有
②.Pocket・・・アイコン有・フォント有
③.RSS・アイコン無し・フォント無し
④.Feedly・アイコン無し・フォント無し
⑤.Line・・・アイコン無し・フォント無し
⑥.はてなブックマーク・・・アイコン無し・フォント無し
 

標準のSNSボタン表示ロジック 

標準のSNSボタン表示ロジック

①.カスタムリンクに登録したURLの『ドメイン名』が、
②.アイコン表示ルーティン【 icon-function.php 】の アイコン・アレイに登録されているドメイン名とマッチングされ、一致すれば『フォント名』を基に、
③.【 svg-icons.svg 】というWebフォント集からフォントを表示する。
④.表示形式は、ドメイン名で一致するスタイルシートが適用される。
 
カスタムリンクへのURL登録例。(ドメイン名がキーとなる。) カスタムリンクのURL登録例
 

  

2. SNSボタンのリンク先【 URL 】の設定要領
 
フォローボタンとシェアボタンの違い。 
フォローボタンとシェアボタンの違い
 

SNSのシェア(共有)ボタン/リンク

シェアボタンは、あなたのサイトのコンテンツを、SNS上で友達やフォロワーに紹介してもらうためのボタンです。

SNSのフォローボタン

フォローボタンは、あなたがSNSにアカウントを開設していることをサイトの利用者に知ってもらい、ファンやフォロワーになってもらうためのボタンです。 

 

A:にSNSボタンがクリックされた時のリンク先【 URL 】を登録するに当たって、シェアボタンにするのか、フォローボタンにするのかによって、ドメイン名以降のURLが異なる。(一般的には、シェアボタンにする。)

Google+ の シェアボタン 設定例。ドメイン名の後に、/share が入り、その後に、サイトのURLを記述する形が一般的。
 
https://plus.google.com/share?url=https://arakoki70.com 
 
上記の Google+ のボタンが押されて、表示された画面の例。 
SNSボタン Google+
 
一番簡単な、URL設定例一覧。(それぞれ、ボタン設定要領のサイトが用意されているので、参照されたし。)
 
Facebook
https://www.facebook.com/sharer/sharer.php?u=https://arakoki70.com
Twitter
https://twitter.com/share?shareUrl=https://arakoki70.com
Google+
https://plus.google.com/share?url=https://arakoki70.com
Pocket
http://getpocket.com/save?url=https://arakoki70.com 
Feedly
https://cloud.feedly.com/#subscription%2Ffeed%2Fhttps%3A%2F%2Farakoki70.com
RSS
https://arakoki70.com/?feed=rss2
※:Mail ・・・ これのみ特殊
mailto:?subject=サイトを共有します&body=この記事、役に立つのでお勧めします。!%0D%0Ahttps://arakoki70.com/
 
Twitterボタンの設定要領サイトにアクセスすると、次のようにボタンの種類を選択できる画面が出る。 Twitter ボタン設定
 
リンクを共有するにチェックを入れ、オプションを設定すると、リンク先のURLが表示される。 
Twitter ボタン設定
 
次の画面は、フォローするにチェックを入れた場合の画面。 
Twitter ボタン設定
 

  

3. アイコン表示ルーティンのアイコン・アレイへの追加
 
【 RSS 】と【 Feedly 】のアイコンは、アイコン表示ルーティン【 icon-function.php 】の アイコン・アレイに登録されていないので、追加。
 
【 icon-function.php 】の場所。
 

【 icon-function.php 】の場所

ディフォルトのアイコン表示ルーティン icon-functions.php の内容。(※:アイコン・アレイの部分のみ。)
/**
 * Returns an array of supported social links (URL and icon name).
 *
 * @return array $social_links_icons
 */
function twentyseventeen_social_links_icons() {
	// Supported social links icons.
	$social_links_icons = array(
		'behance.net'     => 'behance',
		'codepen.io'      => 'codepen',
		'deviantart.com'  => 'deviantart',
		'digg.com'        => 'digg',
		'dribbble.com'    => 'dribbble',
		'dropbox.com'     => 'dropbox',
		'facebook.com'    => 'facebook',
		'flickr.com'      => 'flickr',
		'foursquare.com'  => 'foursquare',
		'plus.google.com' => 'google-plus',
		'github.com'      => 'github',
		'instagram.com'   => 'instagram',
		'linkedin.com'    => 'linkedin',
		'mailto:'         => 'envelope-o',
		'medium.com'      => 'medium',
		'pinterest.com'   => 'pinterest-p',
		'getpocket.com'   => 'get-pocket',
		'reddit.com'      => 'reddit-alien',
		'skype.com'       => 'skype',
		'skype:'          => 'skype',
		'slideshare.net'  => 'slideshare',
		'snapchat.com'    => 'snapchat-ghost',
		'soundcloud.com'  => 'soundcloud',
		'spotify.com'     => 'spotify',
		'stumbleupon.com' => 'stumbleupon',
		'tumblr.com'      => 'tumblr',
		'twitch.tv'       => 'twitch',
		'twitter.com'     => 'twitter',
		'vimeo.com'       => 'vimeo',
		'vine.co'         => 'vine',
		'vk.com'          => 'vk',
		'wordpress.org'   => 'wordpress',
		'wordpress.com'   => 'wordpress',
		'yelp.com'        => 'yelp',
		'youtube.com'     => 'youtube',
	);
 
 最下行に feedly と rss を追加。 
		'yelp.com'        => 'yelp',
		'youtube.com'     => 'youtube',
		'feedly.com'      => 'feedly',
		'arakoki70.com'    => 'rss',
	);
 
 ドメイン名とURLの関係。 
Feedly
https://cloud.feedly.com/#subscription%2Ffeed%2Fhttps%3A%2F%2Farakoki70.com
RSS
https://arakoki70.com/?feed=rss2
 

  

4. フォント集へのWebフォントの追加要領
 
ディフォルトのフォント集 svg-icons.svg には、登録されていないフォントがあるので、必要ならフォントを作成し追加しなければならない。
 
【 svg-icons.svg 】の場所。
 

【 icon-function.php 】の場所

ディフォルトの svg-icons.svg の内容。
(※:<path xxxx>の内容は非常に長いので、見易くするために、中間部分を削除しています。 )
~ svg-icons.svg の内容表示 省略 ~
 
 
最下行に feedly と rss のフォント(<symbol ~ /symbol> )を追加。
~ svg-icons.svg への追記内容 省略 ~
 
 
SNSボタン追加結果。feedly と rss のフォントが表示されるようになった。 SNSボタン追加結果
 
 

以上で、カスタマイズ その-2 ボタンの追加と削除( Webフォントも追加 ) はLine と はてな のボタンが完成していないが、ここで一旦終了。次の章、カスタマイズ その-3 新しいボタンの作成( Line と はてな を追加 )に、【 Webフォントの具体的作成要領 】を記載したので参考にされたし。

 

以上。
(2017.10.03)

 

 

スポンサー リンク

 

             

 

 

 

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください